<template>
    <div class="tota">
      <el-form class="form">
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-button class="btn" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="chartBox">
        <div class="chart" ref="chart" style="height: 400px"></div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        time: '',
        totalNum: [
          {
            order_num: 2222,
            title: '总订单',
            icon: 'iconfont icon-order',
          },
          {
            order_num: 9399,
            title: '总销售额',
            icon: 'iconfont icon-monney',
          },
          {
            order_num: 342,
            title: '今日订单数',
            icon: 'iconfont icon-order-1',
          },
          {
            order_num: 534,
            title: '今日销售额',
            icon: 'iconfont icon-dollar',
          },
        ],
        // 折线图
        option: {
          title: {
            text: '堆叠区域图',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985',
              },
            },
          },
          legend: {
            data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              interval: 0, //设置x坐标间隔为0，解决隔一个显示一个
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              name: '邮件营销',
              type: 'line',
              stack: 'Total',
              // 区域样式颜色
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
              name: '联盟广告',
              type: 'line',
              stack: 'Total',
              // 区域样式颜色
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
              name: '视频广告',
              type: 'line',
              stack: 'Total',
              // 区域样式颜色
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: [150, 232, 201, 154, 190, 330, 410],
            },
            {
              name: '直接访问',
              type: 'line',
              stack: 'Total',
              // 区域样式颜色
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              data: [320, 332, 301, 334, 390, 330, 320],
            },
            {
              name: '搜索引擎',
              type: 'line',
              stack: 'Total',
              // 区域样式颜色
              areaStyle: {},
              emphasis: {
                focus: 'series',
              },
              // 展示对应的y轴值
              label: {
                show: true,
                position: 'top',
              },
              data: [820, 932, 901, 934, 1290, 1330, 1320],
            },
          ],
        },
      }
    },
    methods: {
      getEchartData() {
        const myChart = this.$echarts.init(this.$refs.chart)
        myChart.setOption(this.option)
      },
    },
    mounted() {
      this.getEchartData()
    },
  }
  </script>
  
  <style lang="scss" scoped>
  .tota {
   margin: 20px 0px  0px 20px;
    .form {
      .btn {
        margin-left: 10px;
      }
    }
    .chartBox {
      width: 100%;
      min-height: 300px;
      padding: 10px 20px;
      background: #fff;
      .chart {
        width: 90% !important;
      }
    }
  }
  </style>
  